<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spotify Remote</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.gradient.js"></script>
<script type="text/javascript">

	var height = 0;
	var width = 0;

	function resize() {
	
		if (height == window.innerHeight && width == window.innerWidth)
			return;

		/*if (window.innerWidth > window.innerHeight) // wide layout
		{
			// Subtract with 2 pixels to make room for borders
			height = window.innerHeight - 2;
			width = window.innerWidth;
		
			$('#info').css({
				width: null,
				height: null,
				'float': 'left'
				})
			$('#albumart').css({
				height: null
				});
			$('#controls').css({
				height: null,
				width: null,
				float: 'right'
				});

			$('#info').width(height * .8);
			$('#info').height(height - 2);

			//$('#title').height('20%');
			//$('#albumart').height('80%');
			
			$('#controls').height(height - 2); // Leave some space for borders
			$('#controls').width(width - $('#info').width() - 2);
			

			$('#title').css({
				'font-size': width * .02 + 'px'
			});

			var baseSize = $('#controls').width() / 10;
			$('#previous').width(baseSize * .8);
			$('#previous').height(baseSize * .8);

			$('#play').width(baseSize);
			$('#play').height(baseSize);

			$('#next').width(baseSize * .8);
			$('#next').height(baseSize * .8);
		}
		else // Narrow layout
		{*/
			// Subtract with 4 pixels to make room for borders
			height = window.innerHeight - 5;
			width = window.innerWidth;

			$('#info').css({
				width: null,
				height: null,
				'float': null
				})
			$('#albumart').css({
				height: null
				});
			$('#controls').css({
				height: null,
				width: null,
				float: null
				});
		
			//$('#title').height(window.innerWidth * .2);


			$('#title').css({
				'font-size': height * .07 + 'px'
			});
			
			//$('#info').height(height - $('#controls').height());
			//$('#albumart').height(height - $('#controls').height() - $('#title').height());
			if (window.innerWidth > window.innerHeight) // wide layout
			{
				$('#albumart').height(height - $('#title').height());
				$('#albumart').width($('#albumart').height());
				$('#albumart').css({
					'float': 'left'
				});

				$('#controls').height(height - $('#title').height());
				$('#controls').width(width - $('#albumart').height());
				$('#controls').css({
					'margin-left': $('#albumart').width() + 'px'
				});

				var baseSize = $('#controls').width() * .3;
			}
			else
			{
				$('#controls').height(height * .3);
				$('#controls').width('100%');
				$('#controls').css({
					'margin-left': null
				});

				$('#albumart').height(height - $('#title').height() - $('#controls').height());
				$('#albumart').width(width - 1);
				$('#albumart').css({
					'float': null
				});

				var baseSize = $('#controls').height() * .7;
			}

			$('#previous').width(baseSize * .8);
			$('#previous').height(baseSize * .8);
			
			$('#play').width(baseSize);
			$('#play').height(baseSize);
			
			$('#next').width(baseSize * .8);
			$('#next').height(baseSize * .8);
		//}
	}

	function getSong() {
		$.get('song', function(data) {
			if (data == 'pause') {
				if ($('#play').attr('src') != 'img/play.png')
					$('#play').attr('src', 'img/play.png');
			}
			else if (data != '') {
				if ($('#play').attr('src') != 'img/pause.png')
					$('#play').attr('src', 'img/pause.png');
				var lines = data.split("\n");
				if (lines.length == 2) {
					$('.song').text(lines[1]);
					$('.artist').text(lines[0]);
				}
			}
		});
	}

	$(document).ready(function() {

		resize();

		// We use this instead of jQuery resize event as it seems to have some problems with iphone.
		setInterval('resize()', 1000);
		setInterval('getSong()', 30000);

		$('.play').click(function() {
			if ($('#play').attr('src') == 'img/play.png')
				$('#play').attr('src', 'img/pause.png');
			else
				$('#play').attr('src', 'img/play.png');
		});

		$('a').click(function() {
			$.get($(this).attr('href'), function(data) {
				if (data == 'pause') {
					if ($('#play').attr('src') != 'img/play.png')
						$('#play').attr('src', 'img/play.png');
				}
				else if (data != '') {
					if ($('#play').attr('src') != 'img/pause.png')
						$('#play').attr('src', 'img/pause.png');
					var lines = data.split("\n");
					if (lines.length == 2) {
						$('.song').text(lines[1]);
						$('.artist').text(lines[0]);
					}
				}
			});


			return false;
		});
	});

</script>

<meta name="viewport" content="initial-scale=1, maximum-scale=1; minimum-scale=1, user-scalable=no, webkit-text-size-adjust=50%" />

</head>
<body style="-webkit-text-size-adjust:auto">

<div id="wrap">
	<div id="title">
		<p class="song"><!-- Title --></p>
		<p class="artist"><!-- Artist --></p>
	</div>
	<div id="albumart">
		
	</div>
	<div id="controls">
		<div id="maincontrols">
			<a href="previous"><img id="previous" src="img/previous.png" alt="Previous"></a>
			<a href="playpause" class="play"><img id="play" src="img/<!-- PlayImg -->.png" alt="Play"></a>
			<a href="next"><img id="next" src="img/next.png" alt="Next"></a>
		</div>
	</div>
</div>
	
</body>
</html>